<template>
    <div>
      <van-sidebar v-model="activeKey" > 
      <van-sidebar-item v-for="hh in list"  :title="hh.name" :key="hh.cateid" ref="chuan" @click="click" />
      <Listright :name2='name2' :cateid='cateid'></Listright>
    </van-sidebar>
    
    <Home1></Home1>
  </div>
</template>
<script src="./iconfont.js"></script>
<script>
import Vue from 'vue';
import { Sidebar, SidebarItem } from 'vant';
import axios from 'axios';
import Listright from './Listright';
import Home1 from './Home1.vue'

Vue.use(Sidebar);
Vue.use(SidebarItem);
export default {
  data() {
    return {
      activeKey: 0,
      list:[],
      index:5,
      name1:{},
      name2:'',
      key:0,
      cateid:''
    };
  },
 methods:{
   click(index){
     this.name1=this.$refs.chuan
    //  for(var key in this.name1){
        this.key=index
        this.name2=this.name1[index].title
        this.cateid=this.list[index].cateid
        // console.log(this.cateid)
  
   }
   },
  

  components:{
   Listright,
   Home1
 
  },
  async mounted(){
     let result = await axios.get("/v3/goods/category/main.html?pet_type=dog&version=358&system=wap&isWeb=1")
    //  console.log(result)
     this.list= result.data.categorys
     
     
     },
  }


</script>

<style lang='stylus' scoped>
.van-sidebar
  background-color #fff
  width .7rem
  margin-top .02rem
  bottom .52rem
  position fixed
  top .4rem
  
  
.van-sidebar-item
  background-color #fff
  border-bottom 1px solid #f3f4f5
  font-size 13px
  height .5rem
  width .7rem
  padding 0 0 
  text-align center
  line-height .5rem
  



  

.van-sidebar-item--select
  background-color #f3f4f5
  color #41C856
.van-sidebar-item--select::before
  background rgba(255,255,255,0)

</style>